<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm"  :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="模型名称" prop="modelName">
        <el-input
          v-model="queryParams.modelName"
          placeholder="请输入模型名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh"  @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['flowable:bpmModel:add']"
        >新增</el-button>
      </el-col>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="bpmModelList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="模型名称" align="center" prop="modelName" />
      <el-table-column label="模型Key" align="center" prop="modelKey" />
      <el-table-column label="分类编码" align="center" prop="category" />
      <el-table-column label="版本" align="center" prop="version" />
      <el-table-column label="模型描述" align="center" prop="description" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="150">
        <template #default="scope">
          <el-button
            size="small"
            link
            type="primary"
            icon="Setting"
            @click="handleDesigner(scope.row)"
            v-hasPermi="['flowable:bpmModel:edit']"
          >设计</el-button>
          <el-button
            size="small"
            link
            type="primary"
            icon="View"
            @click="handelPreview(scope.row)"
            v-if="scope.row.bpmnXml"
            v-hasPermi="['flowable:bpmModel:edit']"
          >预览</el-button>
          <el-button
            size="small"
            link
            type="primary"
            icon="Setting"
            @click="handelDeploy(scope.row)"
            v-if="scope.row.bpmnXml"
            v-hasPermi="['flowable:bpmModel:edit']"
          >部署</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

<!--    &lt;!&ndash; 添加或修改模型管理对话框 &ndash;&gt;-->
<!--    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>-->
<!--      <el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
<!--        <el-form-item label="模型名称" prop="modelName">-->
<!--          <el-input v-model="form.modelName" placeholder="请输入模型名称" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="模型Key" prop="modelKey">-->
<!--          <el-input v-model="form.modelKey" placeholder="请输入模型Key" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="模型描述" prop="description">-->
<!--          <el-input v-model="form.description" placeholder="请输入模型描述" />-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <template #footer>-->
<!--        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>-->
<!--        <el-button @click="cancel">取 消</el-button>-->
<!--      </template>-->
<!--    </el-dialog>-->
<!--    &lt;!&ndash; 流程预览对话框 &ndash;&gt;-->
<!--    <el-dialog title="流程预览" v-model="previewOpen"  append-to-body>-->
<!--      <bpmn-viewer ref="previewBpmnRef"></bpmn-viewer>-->
<!--    </el-dialog>-->
  </div>
</template>

<script setup>
import {ref, onMounted, watchEffect, getCurrentInstance, nextTick} from 'vue';
import { listBpmModel, getBpmModel, delBpmModel, addBpmModel, updateBpmModel, deploy } from "@/api/flowable/bpmModel";
import BpmnViewer from "@/components/BpmnProcessDesigner/packages/components/Viewer/index.vue";
import  useBpmnStore  from "@/components/BpmnProcessDesigner/packages/store";
import {useRoute, useRouter} from "vue-router";

const store = useBpmnStore();
const { proxy } = getCurrentInstance();
const previewBpmnRef = ref();
const getModeler = ref(store.getModeler);
const buttonLoading = ref(false);
const loading = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const showSearch = ref(true);
const total = ref(0);
const bpmModelList = ref([]);
const title = ref("");
const open = ref(false);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  modelId: undefined,
  modelName: undefined,
  modelKey: undefined,
  category: undefined,
});
const previewOpen = ref(false);
const xmlString = ref(null);
const form = ref({});
const route = useRoute();
const router = useRouter();
const rules = ref({
  modelId: [
    { required: true, message: "模型ID不能为空", trigger: "blur" }
  ],
  modelName: [
    { required: true, message: "模型名称不能为空", trigger: "blur" }
  ],
  modelKey: [
    { required: true, message: "模型Key不能为空", trigger: "blur" }
  ]
});

onMounted(() => {
  getList();
});

const getList = () => {
  loading.value = true;
  listBpmModel(queryParams.value).then(response => {
    bpmModelList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
};

const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};

const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    modelId: undefined,
    modelName: undefined,
    modelKey: undefined,
    category: undefined,
  };
  handleQuery();
};

const handleSelectionChange = (selection) => {
  ids.value = selection.map(item => item.id)
  single.value = selection.length !== 1
  multiple.value = !selection.length
};

const handleAdd = () => {
  form.value = {};
  open.value = true;
  title.value = "添加模型管理";
};

const submitForm = () => {
  if (form.value.id != null) {
    updateBpmModel(form.value).then(response => {
      open.value = false;
      getList();
    });
  } else {
    addBpmModel(form.value).then(response => {
      open.value = false;
      getList();
    });
  }
};

const cancel = () => {
  open.value = false;
};

const handleDesigner = (row) => {
  // this.$store.dispatch("tagsView/delView", this.$route);
 router.push({
    name:'bpmnModelDesigner',
    query:{
      id:row.id,
      modelName:row.modelName,
      modelKey:row.modelKey
    }
  })
};

const  handelPreview = async (row) => {
  previewOpen.value = true;
  await nextTick();
  previewBpmnRef.value.currentCanvasXml = row.bpmnXml;
  previewBpmnRef.value.previewTemp();


};

const handelDeploy = (row) => {
  this.loadings = this.$loading({
    lock: true,
    text: "部署中",
    background: "rgba(0, 0, 0, 0.7)",
  });
  deploy({modelId:row.modelId}).then(()=>{
    this.$message.success("部署成功");
    this.loadings.close();
  }).finally(()=>{
    this.loadings.close();
  })
};
</script>
